<script setup>
import { ref } from "vue";
const arr = ref([{ title: '收货地址', icon: 'location' }, { title: '我的收藏', icon: 'like' }, { title: '意见反馈', icon: 'question' }])
const active = ref(0);
//优惠券相关
// const chosenCoupon = ref(-1);
// const showList = ref(true)
// const coupons = ref([{
//     available: 1,
//     condition: '无门槛\n最多优惠12元',
//     reason: '',
//     value: 150,
//     name: '优惠券名称',
//     startAt: 1489104000,
//     endAt: 1514592000,
//     valueDesc: '1.5',
//     unitDesc: '元',
// }]);
</script>
<template>
    <HCnavbar title="我的" :leftArrow="false"/>
    <div class="box">
        <van-image round width="80px" height="80px"
            src="https://img2.baidu.com/it/u=797203361,3946606474&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1694883600&t=c896facb7f8f96e99f697d7a1264071d" />
        <div style="margin-top: 30px;margin-left: 10px;">
            <span>用户名:阿莫西林</span>
            <br>
            <span>账号:139*******</span>
        </div>
        <!-- 设置按钮 -->
        <div style="flex: 1;position: relative;">
            <van-icon name="chat-o" dot style="position: absolute;right: 24px;top: 0;" />
            <van-icon name="setting-o" style="position: absolute;right: 0;top: 0;" />
        </div>
    </div>
    <div style="background-color:  rgb(193, 223, 213);border-radius: 10px;padding-top:2px;">
        <p style="margin-left: 4px;">我的订单</p>
        <van-grid :column-num="5">
            <van-grid-item icon="gold-coin" text="待付款" />
            <van-grid-item icon="smile-o" text="待发货" />
            <van-grid-item icon="smile" text="待收货" />
            <van-grid-item icon="more" text="待评价" />
            <van-grid-item icon="warning" text="退订单" />
        </van-grid>
        <div>
            <van-swipe style="height: 180px;" vertical :autoplay="2000" :show-indicators=false>
                <van-swipe-item>
                    <img style="width: 100%;height: 100%;"
                        src="https://img1.baidu.com/it/u=1006312102,575678753&fm=253&app=138&size=w931&n=0&f=PNG&fmt=auto?sec=1694883600&t=98d828bf046dc6729504291e9c8559d9" />
                </van-swipe-item>
                <van-swipe-item>
                    <img style="width: 100%;height: 100%;"
                        src="https://img1.baidu.com/it/u=2858237469,1690426696&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1694883600&t=567c6a7e162a78dd1f56d6dac123309d" />
                </van-swipe-item>
                <van-swipe-item>
                    <img style="width: 100%;height: 100%;"
                        src="https://img2.baidu.com/it/u=3650043345,190072801&fm=253&app=138&size=w931&n=0&f=JPG&fmt=auto?sec=1694883600&t=33279c4a9464135abf121e5cfb9e3506" />
                </van-swipe-item>
                <van-swipe-item>
                    <img style="width: 100%;height: 100%;"
                        src="https://img0.baidu.com/it/u=3263924022,2964628131&fm=253&app=138&size=w931&n=0&f=JPG&fmt=auto?sec=1694883600&t=b4f72f5f891dccf6ae0fd8449b0be784" />
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
    <div class="Short">
        <!-- 优惠券暂时不用 -->
        <!-- <van-popup style="height: 300px;width: 100%;" v-model:show="showList">
        <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon"  style="height: 300px"/>
    </van-popup> -->
        <van-cell is-link :title="item.title" v-for="item in arr" :icon="item.icon" :key="item.id">
        </van-cell>
    </div>
</template>
<style scoped>
.box {
    padding: 20px;
    background-color: rgb(101, 173, 149);
    color: aliceblue;
    display: flex;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    margin-bottom: 10px;
}

span {
    font-size: 14px;
    font-family: "楷体";
}

p {
    font-family: "楷体";
    font-size: 18px;
    font-weight: 700;
}

.Short {
    margin-top: 10px;
    padding-bottom: 48px;
}
</style>